
import "../../pages/promotion/seckill/MiaoSha.css"
import React from 'react'
import { inject, observer } from "mobx-react";
import { Table, Button, Switch,Popconfirm, message } from 'antd'

import { Menu } from 'antd';
import { withRouter } from "react-router-dom";


function onChange(checked) {
  console.log(`switch to ${checked}`);
}


@inject('updateMiaoSha')
@observer

class XianShiMiaoSha extends React.Component {

  constructor() {
    super()
    this.start = {
      tabData: []
    }

  }

  componentWillMount() {//初始化
    this.updateTabData()
  }

  updateTabData() {//获取表格数据
    this.props.updateMiaoSha.selTabData().then(data => {
      this.setState({ tabData: data })
    })
  }





  state = {
    selectedRowKeys: [], // Check here to configure the default column
  };
  onSelectChange = selectedRowKeys => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  };



  render() {

    const { selectedRowKeys } = this.state;

    let pagination = {//配置表格分页器
      defaultPageSize: 4,
    }

    function updateRow (row) {//修改
      let from = {
        skId:row.skId,
        goodsId: row.goodsId,
        goodsName:row.goods.goodsName,
        skBuskcount: row.skBuskcount,
        skIt: row.skIt,
        skPrice: row.skPrice,
        skRuler: row.skRuler,
        huoDongDate: [row.skAst, row.skAed]
      }
      console.log(from)
      this.props.updateMiaoSha.insertStart('update',from)
      this.props.history.push('/Home/cuXiao/MiaoSha/MiaoShaInsert')
    }

    function delTabData(id) {//删除
      this.props.updateMiaoSha.delTabData(id).then(data=>{
        if (data.code === 200) {
          this.updateTabData()
          message.success('删除成功')
        }else message.error('该订单已存在，无法删除')
      })
    }

    let { tabData } = this.props.updateMiaoSha
    let columns = [
      {
        align:'center',
        title: 'ID',
        dataIndex: 'skId',
        key: 'skId',
      },
      {
        align:'center',
        title: '商品名称',
        dataIndex: 'name',
        key: 'skId',
        render: (name, row, key) => {
          return <span>{row.goods.goodsName}</span>
        }
      },
      {
        align:'center',
        title: '活动时间',
        dataIndex: 'skAed',
        key: 'skAed',
        render: (skAed, row, key) => {
          return <span>{row.skAst}<br />{row.skAed}</span>
        }
      },
      {
        align:'center',
        title: '已秒',
        dataIndex: 'skNum',
        key: 'skId',
      },

      {
        align:'center',
        title: '状态',
        dataIndex: 'skStatus',
        key: 'skId',
        render: (item) => {
          let status
          item === 2 ? status = false : status = true
          if (item === 1) item = '进行中'
          if (item === 2) item = '尚未开始'
          if (item === 3) item = '已售罄'
          if (item === 4) item = '已结束'
          return <div>
            {/* <Switch defaultChecked={item} onChange={onChange} /> */}
            <span>{item}</span>
          </div>
        }
      },
      {
        align:'center',
        title: '操作',
        dataIndex: 'skId',
        key: 'skId',
        render: (id, row, key) =>
          <>
            <Button type="primary" onClick={updateRow.bind(this, row)}>修改</Button>
            <Popconfirm onConfirm={delTabData.bind(this, id)} title="确认删除？" okText="是的" cancelText="不">
              <Button type="primary" danger >删除</Button>
            </Popconfirm>
            
          </>
      }
    ]
    return (
      <div className="miaoSha">
        <h1 className="h1">限时秒杀</h1>

        <Table dataSource={this.state.tabData} pagination={pagination} columns={columns} />
      </div>
    )

  }
}

export default withRouter(XianShiMiaoSha)